<template>
  <div>
    <div> {{$store.state.num}} </div>
    <div> {{num}} </div>
    <button @click="add">tijao </button>
    <button @click="addnum(3)">mapMutations </button>
    <button @click="addsync">异步 </button>
    <button @click="addnumsync(7)">addnumsync </button>
  </div>
</template>

<script>
// 映射方法
import { mapMutations, mapState, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      // ...mapState(['num'])
    }
  },
  computed: {
    ...mapState(['num']),
    mynum () {
      return '11'
    }
  },
  methods: {
    add () {
      this.$store.commit('addnum', 2)
    },
    ...mapMutations(['addnum']),
    addsync () {
      this.$store.dispatch('addnumsync', 5)
    },
    ...mapActions(['addnumsync'])

  }
}
</script>

<style scoped>
</style>
